<template>
  <view>
    <!-- 搜索框 -->
    <uGoSearch />
    <!-- 主体 -->
    <view class="main">
      <!-- 菜单 -->
      <view class="menus">
        <view
          class="item"
          :class="current === index ? 'active' : ''"
          v-for="(item, index) in menus"
          :key="item"
          @click="changeContent(index)"
          >{{ item }}</view
        >
      </view>
      <!-- 内容 -->
      <view class="contents">
        <view class="group" v-for="value in contents" :key="value.cat_id">
          <!-- 标题 -->
          <view class="group-title">{{ value.cat_name }}</view>
          <!-- 内容 -->
          <view class="group-contents">
            <navigator
              v-for="v in value.children"
              :key="v.cat_id"
              :url="`/pages/goods_list/goods_list?cid=${v.cat_id}`"
            >
              <u-image :src="v.cat_icon" height="120rpx"></u-image>
              <view>
                {{ v.cat_name }}
              </view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      menus: [],
      contents: [],
      current: 0,
    };
  },
  async onLoad() {
    const res = await this.$u.get(`/categories`);
    this.categoryData = res.message;
    this.menus = this.categoryData.map((item) => item.cat_name);
    this.contents = this.categoryData[0].children;
  },
  methods: {
    changeContent(index) {
      this.current = index;
      this.contents = this.categoryData[index].children;
    },
  },
};
</script>

<style lang="scss">
.main {
  display: flex;
  height: calc(100vh - 50rpx);
  .menus {
    width: 182rpx;
    background-color: #f3f3f3;
    overflow: auto;
    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 90rpx;
    }
    .active {
      color: #eb4450;
    }
  }
  .contents {
    flex: 1;
    overflow: auto;
    .group-title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 90rpx;
      color: #575757;
      &:before {
        content: "/";
        margin-right: 10rpx;
        color: #9c9c9c;
      }
      &:after {
        content: "/";
        margin-left: 10rpx;
        color: #9c9c9c;
      }
    }
    .group-contents {
      display: flex;
      flex-wrap: wrap;
      // padding: 0 60rpx;
      navigator {
        text-align: center;
        width: 33.33%;
        padding: 0 30rpx;
        box-sizing: border-box;
        // margin-left: 40rpx;
      }
    }
  }
}
</style>